<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'

const userInfo = ref(null)
const membershipLevel = ref('free')
const showUpgradePrompt = ref(false)
const currentCategory = ref('music')
const showContent = ref(false)
const currentType = ref('')
const currentTitle = ref('')
const currentItem = ref(null)

// 娱乐分类
const categories = [
  { id: 'music', name: '养生音乐' }
]

// 音乐列表
const musicList = ref([
  { 
    id: 1,
    title: '古琴曲《流水》',
    artist: '赵家珍',
    duration: '5:30',
    url: '/static/music/liushui.mp3'
  },
  { 
    id: 2,
    title: '古筝曲《高山流水》',
    artist: '王中山',
    duration: '6:15',
    url: '/static/music/gaoshanliushui.mp3'
  },
  { 
    id: 3,
    title: '笛子曲《梅花三弄》',
    artist: '张维良',
    duration: '4:45',
    url: '/static/music/meihua.mp3'
  },
  { 
    id: 4,
    title: '琵琶曲《十面埋伏》',
    artist: '李娜',
    duration: '8:20',
    url: '/static/music/shimianmaifu.mp3'
  },
  { 
    id: 5,
    title: '二胡曲《二泉映月》',
    artist: '陈耀星',
    duration: '7:10',
    url: '/static/music/erquanyingyue.mp3'
  }
])

// 当前播放的音乐
const currentMusic = ref(null)
const isPlaying = ref(false)
const audioContext = ref(null)

onMounted(() => {
  // 获取用户信息
  const storedUserInfo = uni.getStorageSync('userInfo')
  if (storedUserInfo) {
    userInfo.value = storedUserInfo
    membershipLevel.value = storedUserInfo.membershipLevel || 'free'
  }
  
  // 初始化音频上下文
  audioContext.value = uni.createInnerAudioContext()
  
  // 监听音频播放结束
  audioContext.value.onEnded(() => {
    isPlaying.value = false
  })
})

// 播放音乐
function playMusic(music) {
  if (currentMusic.value && currentMusic.value.id === music.id) {
    if (isPlaying.value) {
      audioContext.value.pause()
    } else {
      audioContext.value.play()
    }
    isPlaying.value = !isPlaying.value
  } else {
    if (currentMusic.value) {
      audioContext.value.stop()
    }
    currentMusic.value = music
    audioContext.value.src = music.url
    audioContext.value.play()
    isPlaying.value = true
  }
}

// 组件销毁时释放音频资源
onUnmounted(() => {
  if (audioContext.value) {
    audioContext.value.destroy()
  }
})

function switchCategory(categoryId) {
  currentCategory.value = categoryId
}

function openContent(item) {
  // 检查会员权限
  if (item.premiumRequired && membershipLevel.value === 'free') {
    showUpgradePrompt.value = true
    return
  }
  
  currentType.value = item.type
  currentTitle.value = item.title
  currentItem.value = item
  showContent.value = true
}

function backToList() {
  showContent.value = false
}

function goToUpgrade() {
  showUpgradePrompt.value = false
  uni.navigateTo({
    url: '/pages/mine/membership'
  })
}

function closeUpgradePrompt() {
  showUpgradePrompt.value = false
}

function canAccess(item) {
  return !item.premiumRequired || membershipLevel.value !== 'free'
}

function getCategoryContent(category) {
  return categoryContents[category] ? categoryContents[category].value : [];
}

function getCategoryName(categoryId) {
  const category = categories.find(c => c.id === categoryId);
  return category ? category.name : '';
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">休闲娱乐</view>
      <view class="subtitle">聆听养生音乐，陶冶情操</view>
    </view>
    
    <view class="music-list">
      <view 
        v-for="music in musicList" 
        :key="music.id"
        class="music-item"
        :class="{ 'playing': currentMusic && currentMusic.id === music.id && isPlaying }"
      >
        <view class="music-info">
          <view class="music-title">{{ music.title }}</view>
          <view class="music-artist">{{ music.artist }}</view>
          <view class="music-duration">{{ music.duration }}</view>
        </view>
        <view class="play-btn" @click="playMusic(music)">
          {{ currentMusic && currentMusic.id === music.id && isPlaying ? '暂停' : '播放' }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.music-list {
  .music-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    &.playing {
      background-color: #e6f7ff;
      border: 1px solid #1890ff;
    }
    
    .music-info {
      flex: 1;
      
      .music-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .music-artist {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 5rpx;
      }
      
      .music-duration {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .play-btn {
      font-size: 28rpx;
      color: #fff;
      background-color: #1890ff;
      padding: 10rpx 30rpx;
      border-radius: 30rpx;
    }
  }
}
</style>